<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<style type="text/css">
			#login {
				width: 550px;
				height: 500px;
				border: 1px lightgray solid;
				box-shadow: 0px 0px 20px 10px lightgray;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 100px;
				padding: 0 20px;
			}

			#login>img {
				width: 100%;
			}

			#login>h1 {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="login">
			<img src="img/logo.png" />
			<h1>欢迎登录</h1>
			<form class="layui-form layui-form-pane">
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="userName"  lay-verify="username" placeholder="请输入用户名"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="text" name="userPwd" required lay-verify="password" placeholder="请输入密码"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">验证码</label>
					<div class="layui-input-block">
						<input type="text" name="verifyCode"  lay-verify="verifyCode" placeholder="请输入验证码"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" style="text-align: center;">
						<button class="layui-btn" lay-submit lay-filter="loginBtn">登录</button>
						<button type="reset" class="layui-btn layui-btn-primary">取消</button>
				</div>
			</form>
		</div>
	</body>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		layui.form.verify({
			username: function(value, item) { //value：表单的值、item：表单的DOM对象
				if (value.length < 5) {
					return '用户名长度不能小于5';
				}
			},
			password: function(value, item) { //value：表单的值、item：表单的DOM对象
				if (value.length <= 0) {
					return '密码不能为空';
				}
			},
			verifyCode: function(value, item) { //value：表单的值、item：表单的DOM对象
				if (value.length <= 0) {
					return '验证码不能为空';
				}
			}
		});
		
		
		/*拦截表单提交，改为异步*/
		layui.form.on('submit(loginBtn)', function(data){
			//手动发起异步请求 ajax
			console.log(data.field);
			//ajax是jquery中的异步请求框架
			//layui中已经集成的有jquery框架
			//layui.$去使用
			layui.$.ajax({
			   type: "POST",
			   url: "some.php",
			   data: data.field,
			   success: function(msg){
			     alert( "Data Saved: " + msg );
			   }
			});
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
		
	</script>
</html>
